<style scoped lang="scss">
.search-header {
  width: 100%;
  height: 12vh;
  padding-top: 0.8vh;
  background: #161622;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  z-index: 999;

  .back-btn {
    position: absolute;
    left: 1vh;
    top: 0.8vh;
    font-size: 3vh;
    cursor: pointer;
  }

  .search-bar {
    width: 70%;
    height: 5vh;
    display: flex;
    align-items: center;
    background: #2c2f3a;
    border-radius: 2.5vh;
    padding: 0 2vh;
    margin-left: 15%;

    i {
      margin-right: 1vh;
      color: #8b8c96;
      font-size: 2vh;
    }

    input {
      flex: 1;
      background: transparent;
      border: none;
      color: #fff;
      outline: none;
      font-size: 2vh;
    }
  }

  .search-tabs {
    display: flex;
    justify-content: center;
    margin-top: 1vh;

    .tab-item {
      width: 50%;
      text-align: center;
      padding: 0.5vh 0;
      cursor: pointer;
      color: #8b8c96;
      font-size: 2.5vh;
    }

    .tab-item.active {
      color: #fff;
      border-bottom: 0.3vh solid #face15;
    }
  }
}

.placeholder-box {
  width: 100%;
  height: 12vh;
  margin-bottom: 1vh;
}
</style>
<template>
  <div class="searchBox">
    <div class="search-header">
      <!-- 返回按钮 -->
      <div class="back-btn" @click="handleBack">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <!-- 搜索框 -->
      <div class="search-bar">
        <i class="iconfont icon-sousuo"></i>
        <!-- 回车事件变为值改变 -->
        <input type="text" :placeholder="`输入关键字进行搜索（${placeholder}）`" v-model="searchKey">
      </div>
      <!-- 标签切换 -->
      <div class="search-tabs">
        <div class="tab-item" :class="{ active: activeTab === 'video' }" @click="switchTab('video')">
          视频
        </div>
        <div class="tab-item" :class="{ active: activeTab === 'user' }" @click="switchTab('user')">
          用户
        </div>
      </div>
    </div>
    <!-- 占位盒子 -->
    <div class="placeholder-box">

    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { useDebouncedRef } from '../../hooks/useDebouncedRef'
const searchKey = useDebouncedRef('', 500);
// 接收父组件的配置：默认激活标签、搜索提示
const props = defineProps({
  defaultTab: { type: String, default: 'video' }, // 默认激活的标签：video/user
  placeholder: { type: String, default: '视频描述' } // 搜索框提示文字
});

// 对外暴露事件：返回、搜索、标签切换
const emit = defineEmits(['back', 'search', 'tab-change']);

const activeTab = ref(props.defaultTab);

// 返回操作
function handleBack() {
  emit('back');
}

// 搜索操作
watch(
  [() => searchKey.value, () => activeTab.value],
  (newValues) => {
    const [key, tab] = newValues;
    // 搜索词为空时不触发（避免无意义请求）
    if (key.trim()) {
      emit('search', { key: key.trim(), tab }); // 向父组件传递搜索参数
    }
  }
);

// 标签切换
function switchTab(tab) {
  activeTab.value = tab;
  if (tab !== props.defaultTab) {
    emit('tab-change', tab);
  }
}
</script>